<template>
  <div class="bg flex flex-align-center">
    <form class="color-white ml100">
      <h2 class="fs40 f-i letter-5 mb40">后台管理系统</h2>
      <div class="mb20">
        <div><label class="fs13">手机号</label></div>
        <input class="pt15 pb15" @blur="verify('phone')" v-model="form.phone" placeholder="请输入手机号"/>
        <p class="color-err fs12 mt5">{{phoneErrText}}</p>
      </div>
      <div class="mb20">
        <div><label class="fs13">密码</label></div>
        <input class="pt15 pb15" @blur="verify('password')" v-model="form.password" type="password" placeholder="请输入密码"/>
        <p class="color-err fs12 mt5">{{passwordErrText}}</p>
      </div>
      <button @click.prevent="login()" class="br3">登录</button>
    </form>
  </div>
 </template>
 
 <script>
 import request from './../../util/request'
 import { ElMessage } from 'element-plus'

 export default {
  data () {
    return {
      form: {
        phone: '',
        password: ''
      },
      phoneErrText: '',
      passwordErrText: '',
      verifyResult: {
        phone: false,
        password: false
      },
    }
  },
  components: {
  },
  methods: {
    login () {
      if (this.verifyResult.phone && this.verifyResult.password) {
        request.post('/api/login', this.form).then(({data})=>{
          if (data.code == 200) { 
              localStorage.setItem('token', data.data.token)
              this.$router.push('/')
          }else{
            ElMessage.error('手机号密码错误，请重新填写')
          }
          
        })
        // axios.get('/api/login?phone=123&pwd=1')  拼接在请求路径中
        // 接口文档
        // get 拼接在url: /list?a=1&b=1  get('url'+'')
        // post 放在在请求体中  post(url,{})
        // /detail/:id   /detail/1 

       

        /**
         * 前端的请求 包含 请求头  请求体
         * 
         * 请求头中包含了  请求路径 请求方法  content-type       request-header
         * 一般的post请求，会将请求参数放在请求体中   request-body
         * 背诵：
         * content-type：有四个值
         *  application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式
            application/json：消息主体是序列化后的 JSON 字符串
            multipart/form-data： 需要在表单中进行文件上传时，就需要使用该格式。常见的媒体格式是上传文件之时使用的
            text/plain：数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。
         */


      }else{
        this.verifyResult.phone ? this.verify('password') :  this.verify('phone')
      }
    },
    verify (obj) {
      if (obj === 'phone') {
        if (this.form.phone) {
          let regex = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
          let result = regex.test(this.form.phone)
          if (result) {
            this.phoneErrText = ''
            this.verifyResult.phone = true
          }else{
            this.phoneErrText = '请输入正确的手机号'
            this.verifyResult.phone = false
          }
        }else{
          this.phoneErrText = '请输入手机号'
          this.verifyResult.phone = false
        }
      }
      if (obj === 'password') {
        if (this.form.password) {
          this.passwordErrText = ''
          this.verifyResult.password = true
        }else{
          this.passwordErrText = '请输入密码'
          this.verifyResult.password = false
        }
      }
    }
  }
 }
 </script>
 
 <style lang="less" scoped>
//  less里面的定义变量
  @login-color: #d5d5d5;
 .bg{
  height: 100vh;
  background: url(./../../assets/bg2.webp);
  background-size: contain;
  label{
    color: @login-color;
  }
  input{
    width: 300px;
    color: @login-color;
    background: none;
    border: none;
    outline: none;
    border-bottom: 1px solid @login-color;
  }
  button{
    width: 100px;
    color: #fff;
    height: 40px;
    border: none;
    background: linear-gradient(120deg,#20374e,#7ba0c9);
  }
 }
 
 </style>